<template>
  <view class="c-wrapper">
    <view class="menu-item" @click="handleGoToMenu(item.pageUrl)" v-for="item in menus" :key="item.title">
      <image mode="widthFix" :src="item.icon" @error="imageError"></image>
      <text>{{ item.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    menus: {
      Object: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  methods: {
    handleGoToMenu(pageUrl) {
      uni.navigateTo({
        url: pageUrl
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$menu-size: 200upx;

.c-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20upx;
}

.menu-item {
  width: $menu-size;
  height: $menu-size;
  vertical-align: top;
  display: inline-flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;

  image {
    width: 100upx;
    height: 100upx;
  }

  text {
    margin-top: 10upx;
    font-size: $uni-font-size-base;
  }
}

.menu-item:hover {
  box-shadow: $uni-shadow-sm;
  border-radius: $def-radius;
}
</style>
